<!DOCTYPE html>
<html>

<head>
  <title>Assignment1</title>
  <script src="d3.min.js"></script>
  <script src="d3-v6-tip.js"></script>
  <script src="jquery-3.4.1.min.js"></script>
  <link rel="stylesheet" href="d3-tip.css">
</head>

<body>
  <svg width="1600" height="800" id="mainsvg" class="svgs"></svg>
  <script>
      const svg = d3.select('svg');
      width = svg.attr('width');
      height = svg.attr('height');
      const margin = {top: 60, right: 30, bottom: 60, left: 150};
      const innerWidth = width - margin.left - margin.right;
      const innerHeight = height - margin.top - margin.bottom;
      width = innerWidth
      height = innerHeight
      const mainGroup = svg.append('g')
      .attr('transform', `translate(${margin.left}, ${margin.top})`)
    // set the dimensions and margins of the graph
    // Parse the Data
    d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_stackedXL.csv").then( function(data) {

      // List of subgroups = header of the csv files = soil condition here
      const subgroups = data.columns.slice(1)

      // List of groups = species here = value of the first column called group -> I show them on the X axis
      const groups = data.map(d => d.group)

      // Add X axis
      const x = d3.scaleBand()
          .domain(groups)
          .range([0, width])
          .padding([0.2])
          mainGroup.append("g")
        .attr("transform", `translate(0, ${height})`)
        .call(d3.axisBottom(x).tickSizeOuter(0));

      // Add Y axis
      const y = d3.scaleLinear()
        .domain([0, 120])
        .range([ height, 0 ]);
        mainGroup.append("g")
        .call(d3.axisLeft(y));

      // color palette = one color per subgroup
      const color = d3.scaleOrdinal()
        .domain(subgroups)
        .range(d3.schemeSet2);

      //stack the data? --> stack per subgroup
      const stackedData = d3.stack()
        .keys(subgroups)
        (data)




      // ----------------
      // Highlight a specific subgroup when hovered
      // ----------------

      // Show the bars
      mainGroup.append("g")
        .selectAll("g")
        // Enter in the stack data = loop key per key = group per group
        .data(stackedData)
        .join("g")
          .attr("fill", d => color(d.key))
          .attr("class", d => "myRect " + d.key ) // Add a class to each subgroup: their name
          .selectAll("rect")
          // enter a second time = loop subgroup per subgroup to add all rectangles
          .data(d => d)
          .join("rect")
            .attr("x", d => x(d.data.group))
            .attr("y", d => y(d[1]))
            .attr("height", d => y(d[0]) - y(d[1]))
            .attr("width",x.bandwidth())
            .attr("stroke", "grey")
            .on("mouseover", function (event,d) { // What happens when user hover a bar

              // what subgroup are we hovering?
              const subGroupName = d3.select(this.parentNode).datum().key

              // Reduce opacity of all rect to 0.2
               d3.selectAll(".myRect").style("opacity", 0.2)

              // Highlight all rects of this subgroup with opacity 1. It is possible to select them since they have a specific class = their name.
               d3.selectAll("."+subGroupName).style("opacity",1)
            })
            .on("mouseleave", function (event,d) { // When user do not hover anymore

              // Back to normal opacity: 1
              d3.selectAll(".myRect")
              .style("opacity",1)
          })
          console.log(data)
          console.log(stackedData)
          console.log(subgroups)

          legend_length = 20
          legend_interval = 30

          var legend = mainGroup.selectAll(".legend")
          .data(Array.from(subgroups)).join('g')
          .attr("class", "legend")
          .attr("transform", (d, i) => `translate(${(60)},${(i * legend_interval)})`);

          legend.append("rect")
            .attr("x", 0)
            .attr("y", -3)
            .attr("width", legend_length)
            .attr("height", legend_length)
            .style("fill", d => color(d));

          // draw legend text
          legend.append("text")
            .attr("x", legend_length + 15)
            .attr("y", 5)
            .attr("dy", ".45em")
            .attr("text-anchor", "start")
            .attr("font-size", '2em')
            .text(d => d[0].toUpperCase()+d.slice(1));

            })

    </script>
</body>

</html>